{% extends "/based/based.html" %}
{% block content %}
	<main class="page-content">
	<form method="POST" name = "memo">
	<style>
	.volvo{color: grey;}
	.saab{color: red;}
	.txt_area{color:black;}
	</style>

	 <table align="center" border="0" style="width: 80%; ">
		<tbody>
			<tr>
				<td >
				<div align="center" style="text-align:center" id="fourth" class="buttonBox" type="submit" value = "select"/> 
				  <button name='submit_button' value='select'>选择</button>
				  <div class="border"></div>
				  <div class="border"></div>
				  <div class="border"></div>
				  <div class="border"></div>
				</div> 
				</td>
				
				<td>
				filter:
				<input name="keyword" type="text" value="">
				</td>
				<td>
				display:<br>
				
				<input name="display" type="radio" value="last_updated" checked/>last updated
			    <input name="display" type="radio" value="all" />all
			  
				<br>
				</td>
				<td>
				sort:<br>
				
				<input name="sortBy" type="radio" value="att" checked/>attention
			    <input name="sortBy" type="radio" value="cp" />call_put
				<br>
				</td>
				<td>
				<div align="left" style="text-align:center" id="fourth" class="volvo" type="submit" value = "save"/> 
								  <button name='submit_button' value='save'>保存</button>
								  <div class="border"></div>
								  <div class="border"></div>
								  <div class="border"></div>
								  <div class="border"></div>
							</div> 
				</td>
			</tr>
			</tbody>
		</table>
		
    <div align="center"><span style="font-size: x-large;"><span style="text-decoration: underline;"></span></span></div>
   
		
	
	<table align="center" border="0" width="90%">
    <tbody>
     	<tr>
        <td>
         <div id="att_cp" width="100%"></div>	
        </td>
        </tr>
          <tr>
        <td>
         <br>Attention:<br>{{att|safe }}
         <br><br>
        </td>
        </tr>
          <tr>
        <td>
         <br>Key Prices<br>{{keyPrice|safe }}
        </td>
        </tr>
        <tr>
        <td>
        <br><br>
        <br>Memo:<br>{{memo|safe }}
         
        </td>
        </tr>
    	
      
    </tbody>   
    </table>    
           
           
		 </form>
	
	<script>

	const data = [
	 {%for i in range(0,att_plot|length) %} 
		{
			name:'{{att_plot[i]["sign"]}}{{att_plot[i]["chartName"]}}({{att_plot[i]["symbol"]}},{{att_plot[i]["interval"]}},{{att_plot[i]["lastUpdateTimeStr"]}})_{{att_plot[i]["marginRate"]}}',
			att:{{att_plot[i]["att"]}},
			cp:{{att_plot[i]["cp"]}},
			sign:'{{att_plot[i]["sign"]}}'
		},
		
	{% endfor %}
	];

	const BidirectionalBarPlot = new G2Plot.BidirectionalBar('att_cp', {
	  data,
	  height:1200,
	  xField: 'name',
	  seriesField: 'name',
	  xAxis: {
	    position: 'bottom',
	    minLimit:100,
	    maxLimit:-100,
	    label: {
		      style: {
		        fill: 'White',
		        opacity: 1.,
		        fontSize: 16
		      },
		      
		    },
	  },
	  interactions: [{ type: 'active-region' }],
	  yField: ['att', 'cp'],
	  yAxis:
	  {
	    minLimit:100,
	    maxLimit:-100
	  },
	  barStyle: ({ name }) => {
		    if (name.charAt(0)==='+') {
		      return {fill:'#f67351'};
		    } 
		    return {fill:'#8bea8b'};
		  },
	  tooltip: {
	    shared: true,
	    showMarkers: false,
	  },
	 
	});

	BidirectionalBarPlot.render();
	</script>
	<div align="center"><span style="font-size: x-large;"><span style="text-decoration: underline;"></span></span></div>
{% endblock %}